<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.9.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="../css/fs.css" media="all"/>
    <script type="text/javascript" src="../plugins/layui/layui.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../controller/topic.js?v="+ Date.now()></script>
    <style>
        .layui-form-label{
            width: 100px;
        }

    </style>
</head>
<body>
    <blockquote style="margin-top: 10px;margin-left: 5px;margin-right: 5px;height: 60px" class="layui-elem-quote news_search">
        <div class="demoTable">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="topicSearch" placeholder="话题" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <input type="checkbox" name="hotPushTopic" lay-skin="primary" title="热推话题" >
                    </div>
                    <div class="layui-inline">
                        <input type="checkbox" name="hotSearchTopic" lay-skin="primary" title="热搜话题">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" data-type="reload"><i class="layui-icon">&#xe615;</i>查询</button>
                    </div>
                </div>
            </div>
        </div>
    </blockquote>
    <div style="margin-left: 5px;margin-right: 5px" >
        <table class="layui-hide" lay-filter="demo" id="table"></table>
    </div>
    <!--话题编辑窗口-->
    <div style="display: none; margin-top:30px;margin-left: 30px" id="topic">
        <form class="layui-form" action="" lay-filter="topic">
            <div class="layui-form-item">
                <label class="layui-form-label">话题</label>
                <div style="width: 400px" class="layui-input-inline">
                    <input type="hidden" id="topicId" name="id">
                    <input type="text"  disabled class="layui-input layui-disabled" name="name"  lay-verify="required"  >
                </div>
                <div id="videoNumber" class="layui-form-mid layui-word-aux"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">话题封面图:</label>
                <div class="layui-input-block">

                    <div>
                        <button type="button"  class="layui-btn"   id="uploadTopic"><i class="layui-icon"></i>更换</button>
                    </div>
                    <div class="layui-upload-list">
                        <img style="height: 120px;width: 120px" class="layui-upload-img" id="topicImage">
                        <input type="hidden" name="headPortraitId"/>
                        <p id="topicText"></p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">话题描述:</label>
                <div style="width: 500px" class="layui-input-block">
                    <textarea placeholder="请输入内容" name="description" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <div class="layui-input-block">
                    <input type="checkbox" name="isHotPush"lay-filter="hotPush" id="hotPush" lay-skin="primary" title="是否热推" >
                </div>
            </div>
            <div id="banner" class="layui-form-item">
                <label class="layui-form-label">热推banner：</label>
                <div class="layui-input-block">
                        <button type="button"  class="layui-btn"   id="uploadBanner"><i class="layui-icon"></i>更换</button>
                        <div  class="layui-upload-list">
                            <img style="height: 120px;width: 120px" class="layui-upload-img" id="bannerImage">
                            <input type="hidden" name="bannerPicId"/>
                            <p id="demoText"></p>
                        </div>
                    </div>

            </div>
            <div class="layui-form-item" pane="">
                <div class="layui-input-block">
                    <input type="checkbox" name="isRanking" lay-skin="primary" title="是否加入排行榜" >
                </div>
                <div class="layui-input-block">
                    <input type="checkbox" name="isHotSearch"  lay-filter="hotSearch" id="hotSearch" lay-skin="primary" title="是否热搜" >
                </div>
            </div>

            <div id="hotSort" class="layui-form-item">
                <label class="layui-form-label">热搜排序</label>
                <div class="layui-input-inline">
                    <input type="number"    name="searchIndex"  lay-verify="search"   class="layui-input">
                </div>
            </div>
            <div style="display: none" class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="addAndUpdate">立即提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--话题编辑窗口-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
<script>
    layui.use(['form', 'layedit', 'laydate',"table",'upload'], function() {
        var $ = layui.jquery
            , upload = layui.upload;
        var table = layui.table;


        //方法级渲染
        table.render({
            elem: '#table'
            ,url: '/topicController/paramlist'
            ,cols: [
                [
                    {type:'numbers', title: '序',align:"center"},

                    { field: 'name', width:"25%",title: '话题',templet: function(d){
                        if (d.isHotPush == 1 && d.isHotSearch ==1){
                            return "<div class='layui-row'>"+
                                "<div  class='layui-col-xs6' >"+
                                d.name+
                                "</div>"+
                                '<div style="float: left" class="layui-col-xs6">'+
                                '<button style="float: left;border-radius: 6px"  class="layui-btn layui-btn-sm layui-btn-danger">热搜</button>'+
                                '<button style="float: left;border-radius: 6px"  class="layui-btn  layui-btn-sm layui-btn-warm">热推</button>'
                                +'</div>'
                                +'</div>';
                        }
                        else if (d.isHotPush == 0 && d.isHotSearch ==1){
                            return "<div class='layui-row'>"+
                                "<div  class='layui-col-xs6' >"+
                                d.name+
                                "</div>"+
                                '<div style="float: left" class="layui-col-xs6">'+
                                '<button style="float: left;border-radius: 6px"  class="layui-btn layui-btn-sm layui-btn-danger">热搜</button>'
                                +'</div>'
                                +'</div>';
                        }
                        else if (d.isHotPush == 1 && d.isHotSearch ==0){
                            return "<div class='layui-row'>"+
                                "<div  class='layui-col-xs6' >"+
                                d.name+
                                "</div>"+
                                '<div style="float: left" class="layui-col-xs6">'+
                                '<button style="float: left;border-radius: 6px"  class="layui-btn layui-btn-sm  layui-btn-warm">热推</button>'
                                +'</div>'
                                +'</div>';
                        }
                        else {
                            return d.name
                        }
                    }},

                    { field: 'videoNumber', title: '视频数',align:"center"},

                    { field: 'publisherName', title: '发起人',align:"center"},

                    {field: 'createTime',align:"center", title: '加入时间',templet: function(d){
                        if(isNull(d.createTime)){
                            return "-";
                        }
                        return getFormatDateByLong(d.createTime, "yyyy-MM-dd hh:mm");
                    }},
                    {field: null , title: '操作',align:"center",templet:"#barDemo" }
                ]
            ]
            ,id: 'testReload'
            ,page: true
            ,done:function (res, curr, count) {
                sessionStorage.setItem("curr",curr)
                sessionStorage.setItem("count",count)

               sessionStorage.setItem("bannerNumber",res.bannerNumber)


            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var name=$("input[name='topicSearch']").val()
                var isHotPush = null;
                var isHotSearch = null;
                if($("input[name='hotPushTopic']").is(":checked")){//选中
                    isHotPush = 1
                }
                if($("input[name='hotSearchTopic']").is(":checked")){//选中
                    isHotSearch = 1
                }
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name: name,
                        isHotPush:isHotPush,
                        isHotSearch:isHotSearch
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    })


</script>
</body>
</html>